<template>
  <a-modal
    :title='title'
    :width='840'
    :visible='visible'
    :isLoading='isLoading'
    :maskClosable='false'
    :destroyOnClose='false'
    @ok='handleSubmit'
    @cancel='handleCancel'
  >
    <a-spin :spinning='isLoading'>
      <div class='library-box clearfix'>
        <!-- 文件列表 -->
        <div class='file-list'>
          <!-- 头部操作栏 -->
          <div class='top-operate clearfix'>
            <!-- 搜索框 -->
          </div>
          <div class='file-list-body'>
            <!-- 文件列表 -->
            <ul v-show='step === 0' class='file-list-ul'>
              <a-tooltip v-for='(item, index) in groupList'
                         :key='index' placement='topLeft' :title='item.label'>
                <li class='file-item oneline-hide' @click='handleChange(item.value)'>
                  <a-icon class='li-icon' type='folder'></a-icon>
                  {{ item.label }}
                </li>
              </a-tooltip>
              <li v-if='!groupList.length'><a-empty /></li>
            </ul>
            <ul v-show='step === 1' class='file-list-ul'>
              <a-tooltip  placement='topLeft' title='点击返回'>
              <li @click='handleBack' class='file-item' style='width: 100%'><a-icon class='li-icon' type='folder-open'></a-icon> {{queryParam.name}}</li>
              </a-tooltip>
              <a-tooltip v-for='(item, index) in fileList'
                         :key='index' placement='topLeft' :title='item.label'>
                <li class='file-item oneline-hide' :class='{selected:item.selected}'  @click='handleSelect(item)'>
                  <a-icon class='li-icon' v-if='item.selected' type='check'></a-icon>
                  <a-icon class='li-icon' v-else :type='item.hasOwnProperty("url")?"file":"folder"'></a-icon>
                  {{ item.label }}
                </li>
              </a-tooltip>
              <li v-if='!fileList.length'><a-empty /></li>
            </ul>

          </div>
        </div>
      </div>
    </a-spin>

    <template #footer>
      <span v-show='selectedNum > 0' class='footer-desc'>已选择{{ selectedNum }}项</span>
      <a-button v-show='step===1 && multiple'  @click='handleCancelSelectAll' type=''>取消全选</a-button>
      <a-button v-show='step===1 && multiple'  @click='handleSelectAll' type='primary' >全选</a-button>
      <div style='margin: 0 10px;display: inline-block;'>
        <a-divider type="vertical" />
      </div>
      <a-button  @click='handleCancel'>取消</a-button>
      <a-button  @click='handleSubmit' type='primary'>确认</a-button>
    </template>
  </a-modal>
</template>

<script>
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import store from '@/store'
import { debounce } from '@/utils/util'
import FileExtEnum from '@/common/enum/file/FileExt'
import * as Api from '@/api/book/groupFile'

export default {
  name: 'FilesModal',
  components: {},
  props: {
    // 多选模式, 如果false为单选
    multiple: PropTypes.bool.def(false),
  },
  data() {
    return {
      // 对话框标题
      title: '图片库',
      // modal(对话框)是否可见
      visible: false,
      // 查询参数
      queryParam: {
        // 文件名称
        name: '',
        ext:null,
        prefix:null
      },
      // modal(对话框)确定按钮 loading
      isLoading: true,
      // 分组列表
      groupList: [],
      // 文件列表
      fileList: [],
      selectedNum:0,
      step: 0
    }
  },
  created() {
  },
  methods: {

    // 显示对话框
    show(val,dirName,prefix) {
      const info = FileExtEnum.valueOf(val)
      this.title = info.name
      this.queryParam.ext = info.ext
      this.queryParam.name = dirName || ''
      this.queryParam.prefix = prefix || null
      if(this.queryParam.name){
        this.step=1
        this.getFileList()
      }else{
        this.step=0
        // 获取分组列表
        this.getGroupList(true)
      }
      // 显示窗口
      this.visible = true
    },


    // 获取文件分组列表
    getGroupList(refresh) {
      if(this.groupList.length && refresh !== true) return
      this.isLoading=true
      Api.resIndex().then(result => {
        this.groupList = result.data
      }).finally(() => {
        this.isLoading = false
      })
    },

    // 获取文件列表
    getFileList() {
      this.isLoading = true
      Api.resFiles(this.queryParam)
        .then(result => {
          this.fileList = result.data
        }).finally(() => {
        this.isLoading = false
      })
    },
    handleBack(){
      const dir=/\//.test(this.queryParam.name)?'/':'\\'
      const value = this.queryParam.name.split(dir)
      value.pop()
      if(value[0] === ''){
        value.splice(0,1)
      }
      this.step=value.length > 0?1:0
      this.queryParam.name = value.join(dir)
      if(this.step === 0){
        this.getGroupList()
      }else{
        this.getFileList()
      }
    },
    handleChange(value){
      this.step=1
      this.selectedNum=0
      this.queryParam.name=value
      this.getFileList()
    },
    handleSelect(item){
      if(!item.hasOwnProperty('url')){
        this.handleChange(item.value)
        return;
      }
      item.selected=!item.selected
      if(item.selected){
        if(this.multiple){
          this.selectedNum++
        }else{
          this.selectedNum=1
          this.fileList.forEach(row=>{
            if(row.selected && row.value !== item.value) row.selected=false
          })
        }
      }else{
        this.selectedNum--
      }
    },
    handleSelectAll(){
      if(this.selectedNum === this.fileList.length) return
      this.selectedNum=this.fileList.length
      this.fileList.forEach(item=>{
        item.selected=true
      })
    },
    handleCancelSelectAll(){
      if(this.selectedNum === 0 ) return
      this.fileList.forEach(item=>{
        item.selected=false
      })
      this.selectedNum=0
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
      setTimeout(()=>{
        this.groupList=[]
        this.fileList=[]
        this.selectedNum=0
      },150)
    },

    // 确认按钮
    handleSubmit(e) {
      e.preventDefault()
      // 获取选中的文件
      const selectedItems = this.fileList.filter(item=>item.selected)
      if(this.selectedNum === 0){
        this.$message.error('请选择至少一个文件', 0.8)
        return;
      }
      // 通知父端组件提交完成了
      this.$emit('handleSubmit', {items:selectedItems,name:this.queryParam.name})
      // 关闭对话框
      this.handleCancel()
    }

  }
}
</script>

<style lang='less' scoped>
/deep/ .ant-modal-header,
/deep/ .ant-modal-footer {
  border: none;
}

/deep/ .ant-modal-body {
  padding: 6px;
}

/deep/ .ant-empty {
  padding: 120px 0;
}

/* 文件库 */
.library-box {
  user-select: none;

  // 文件分组
  .file-group {
    float: left;
    border-right: 1px solid #e6e6e6;

    // 分组列表
    .group-tree {
      width: 150px;
      height: 440px;
      overflow-y: auto;
      overflow-x: auto;

      /deep/ .ant-tree {
        display: inline-block;
        min-width: 100%;
        max-height: 380px;
        width: auto;
      }
    }

    // 新增分组
    .group-add {
      display: block;
      margin-top: 20px;
      font-size: @font-size-base;
      padding: 0 30px;
    }
  }

  // 文件列表
  .file-list {

    // 头部操作区
    .top-operate {
      margin-bottom: 10px;

      .file-upload {
        .upload-desc {
          font-size: 12px;
          padding-right: 10px;
          color: #999;
        }
      }
    }

    // 文件列表
    .file-list-body {
      height: 455px;

      .file-list-ul {
        margin: 0;
        padding: 0;
        height: 417px;
        overflow-y: scroll;
        //display: flex;
        //flex-direction: column;
        //flex-flow: row wrap;
      }

      .file-item {
        width: 33%;
        float: left;
        //flex: 0 0 33%;
        //flex-grow: 0;
        cursor: pointer;
        //height: 40px;
        padding: 5px 10px;
        -webkit-transition: All 0.2s ease-in-out;
        -moz-transition: All 0.2s ease-in-out;
        -o-transition: All 0.2s ease-in-out;
        transition: All 0.2s ease-in-out;
        border: 1px solid transparent;
        &.selected{
          color: #fff;
          background-color:  #16bce2;
          border-color: #fff;
        }

        .li-icon {
          font-size: 15px;
        }

        &:hover {
          border-color: #16bce2;
        }
      }
    }
  }

}
.footer-desc{
  margin-right: 20px;
  display: inline-block;
}
</style>
